<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Token 机制解析 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .drop-cap:first-letter {
            font-size: 3.5rem;
            line-height: 1;
            float: left;
            margin: 0 1rem 0 0;
            color: #4F46E5;
            font-weight: bold;
        }
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .token-type-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .nav-link:hover {
            color: #4F46E5;
        }
        .nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #4F46E5;
            transition: width .3s;
        }
        .nav-link:hover::after {
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-24">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">深入理解 Token 机制</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">现代身份验证与授权的核心原理与实践</p>
                <div class="flex justify-center space-x-4">
                    <a href="#what-is-token" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                        了解原理
                    </a>
                    <a href="#token-types" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">
                        查看类型
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Navigation -->
    <nav class="sticky top-0 bg-white shadow-sm z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-center space-x-8">
                <a href="#what-is-token" class="nav-link font-medium text-gray-700">什么是Token</a>
                <a href="#generate-token" class="nav-link font-medium text-gray-700">生成Token</a>
                <a href="#expiration" class="nav-link font-medium text-gray-700">过期时间</a>
                <a href="#visualization" class="nav-link font-medium text-gray-700">可视化图表</a>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12 max-w-5xl">
        <!-- What is Token -->
        <section id="what-is-token" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-key mr-3 text-indigo-500"></i> 什么是 Token
            </h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-8">
                <p class="drop-cap mb-6 text-gray-700">
                    在计算机科学和信息安全领域，<strong class="text-indigo-600">Token</strong> 是一种用于身份验证和授权的字符串或对象。Token 通常用于在客户端和服务器之间传递用户身份信息，以确保请求的合法性。
                </p>
                
                <div class="grid md:grid-cols-2 gap-8 my-8">
                    <div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
                        <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
                            <i class="fas fa-user-check mr-2"></i> 主要应用场景
                        </h3>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                                <span><strong>身份验证：</strong>用户登录后，系统会生成一个 Token，并在每次请求中将其作为凭证传递</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                                <span><strong>授权：</strong>Token 用于确认用户是否有权限访问特定资源或执行某个操作</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                                <span><strong>会话管理：</strong>Token 可以代表用户会话状态，允许无状态的客户端与服务器通信</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="bg-purple-50 p-6 rounded-lg border-l-4 border-purple-500">
                        <h3 class="font-bold text-lg mb-3 text-purple-700 flex items-center">
                            <i class="fas fa-shield-alt mr-2"></i> Token 的优势
                        </h3>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-star text-purple-500 mt-1 mr-2"></i>
                                <span><strong>无状态：</strong>服务器不需要存储会话信息，所有必要信息都包含在 Token 中</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-star text-purple-500 mt-1 mr-2"></i>
                                <span><strong>可扩展：</strong>适合分布式系统和微服务架构</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-star text-purple-500 mt-1 mr-2"></i>
                                <span><strong>安全性：</strong>支持签名和加密，防止篡改</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- How to generate Token -->
        <section id="generate-token" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-cogs mr-3 text-indigo-500"></i> 如何生成 Token
            </h2>
            
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <!-- JWT Card -->
                <div class="token-type-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="bg-indigo-600 p-4 text-white">
                        <h3 class="font-bold text-xl flex items-center">
                            <i class="fas fa-file-code mr-2"></i> JWT
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">JSON Web Token 是一种基于 JSON 的开放标准，用于在网络应用环境中传递声明。</p>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-800 mb-2">结构组成：</h4>
                            <ul class="space-y-1 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-header text-indigo-500 mr-2 mt-1"></i>
                                    <span>Header - 元数据</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-database text-indigo-500 mr-2 mt-1"></i>
                                    <span>Payload - 实际数据</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-signature text-indigo-500 mr-2 mt-1"></i>
                                    <span>Signature - 验证签名</span>
                                </li>
                            </ul>
                        </div>
                        <a href="#jwt-details" class="text-indigo-600 hover:text-indigo-800 font-medium">查看详情 →</a>
                    </div>
                </div>
                
                <!-- OAuth 2.0 Card -->
                <div class="token-type-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="bg-purple-600 p-4 text-white">
                        <h3 class="font-bold text-xl flex items-center">
                            <i class="fas fa-lock mr-2"></i> OAuth 2.0
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">OAuth 2.0 是一种授权框架，允许应用程序获取对用户数据的有限访问权限。</p>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-800 mb-2">关键特点：</h4>
                            <ul class="space-y-1 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-exchange-alt text-purple-500 mr-2 mt-1"></i>
                                    <span>授权而非认证</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-ticket-alt text-purple-500 mr-2 mt-1"></i>
                                    <span>访问令牌和刷新令牌</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-user-shield text-purple-500 mr-2 mt-1"></i>
                                    <span>支持多种授权类型</span>
                                </li>
                            </ul>
                        </div>
                        <a href="#oauth-details" class="text-purple-600 hover:text-purple-800 font-medium">查看详情 →</a>
                    </div>
                </div>
                
                <!-- UUID Card -->
                <div class="token-type-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="bg-blue-600 p-4 text-white">
                        <h3 class="font-bold text-xl flex items-center">
                            <i class="fas fa-fingerprint mr-2"></i> UUID
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">通用唯一标识符，用于生成随机唯一的 Token，通常用于一次性令牌或简单场景。</p>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-800 mb-2">版本类型：</h4>
                            <ul class="space-y-1 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-hashtag text-blue-500 mr-2 mt-1"></i>
                                    <span>基于时间 (v1)</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-random text-blue-500 mr-2 mt-1"></i>
                                    <span>随机数 (v4)</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-key text-blue-500 mr-2 mt-1"></i>
                                    <span>命名空间哈希 (v3, v5)</span>
                                </li>
                            </ul>
                        </div>
                        <a href="#uuid-details" class="text-blue-600 hover:text-blue-800 font-medium">查看详情 →</a>
                    </div>
                </div>
            </div>
            
            <!-- JWT Details -->
            <div id="jwt-details" class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="bg-indigo-100 p-4">
                    <h3 class="text-2xl font-bold text-indigo-800 flex items-center">
                        <i class="fas fa-file-code mr-2"></i> JWT 生成过程
                    </h3>
                </div>
                <div class="p-6">
                    <h4 class="font-bold text-lg mb-4 text-gray-800">1. 创建 Header</h4>
                    <div class="code-block mb-6">
                        <pre class="p-4 overflow-x-auto"><code class="language-json">{
  "alg": "HS256",
  "typ": "JWT"
}</code></pre>
                    </div>
                    
                    <h4 class="font-bold text-lg mb-4 text-gray-800">2. 创建 Payload</h4>
                    <div class="code-block mb-6">
                        <pre class="p-4 overflow-x-auto"><code class="language-json">{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}</code></pre>
                    </div>
                    
                    <h4 class="font-bold text-lg mb-4 text-gray-800">3. 生成签名</h4>
                    <p class="text-gray-700 mb-4">使用头部和负载与密钥一起生成签名。以 HMAC SHA-256 为例：</p>
                    <div class="code-block mb-6">
                        <pre class="p-4 overflow-x-auto"><code class="language-java">String signature = HMACSHA256(
  base64UrlEncode(header) + "." + 
  base64UrlEncode(payload), 
  secret
);</code></pre>
                    </div>
                    
                    <h4 class="font-bold text-lg mb-4 text-gray-800">4. 组合成完整 Token</h4>
                    <div class="code-block">
                        <pre class="p-4 overflow-x-auto"><code class="language-java">String token = base64UrlEncode(header) + "." + 
             base64UrlEncode(payload) + "." + 
             signature;</code></pre>
                    </div>
                </div>
            </div>
            
            <!-- OAuth 2.0 Details -->
            <div id="oauth-details" class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="bg-purple-100 p-4">
                    <h3 class="text-2xl font-bold text-purple-800 flex items-center">
                        <i class="fas fa-lock mr-2"></i> OAuth 2.0 授权流程
                    </h3>
                </div>
                <div class="p-6">
                    <div class="mb-6">
                        <h4 class="font-bold text-lg mb-4 text-gray-800">授权码流程 (Authorization Code Flow)</h4>
                        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <ol class="list-decimal pl-5 space-y-3 text-gray-700">
                                <li>客户端将用户重定向到授权服务器</li>
                                <li>用户授权客户端访问其资源</li>
                                <li>授权服务器将用户重定向回客户端，附带授权码</li>
                                <li>客户端使用授权码向授权服务器请求访问令牌</li>
                                <li>授权服务器验证授权码并返回访问令牌</li>
                                <li>客户端使用访问令牌访问受保护资源</li>
                            </ol>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-bold text-lg mb-4 text-gray-800">令牌响应示例</h4>
                            <div class="code-block">
                                <pre class="p-4 overflow-x-auto"><code class="language-json">{
  "access_token": "eyJhbGciOiJIUz...",
  "token_type": "bearer",
  "expires_in": 3600,
  "refresh_token": "def50200ae2...",
  "scope": "read write"
}</code></pre>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-lg mb-4 text-gray-800">令牌类型</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-ticket-alt text-purple-500 mt-1 mr-2"></i>
                                    <span><strong>访问令牌 (Access Token):</strong> 用于访问受保护资源</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-sync-alt text-purple-500 mt-1 mr-2"></i>
                                    <span><strong>刷新令牌 (Refresh Token):</strong> 用于获取新的访问令牌</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-id-badge text-purple-500 mt-1 mr-2"></i>
                                    <span><strong>ID 令牌 (ID Token):</strong> 包含用户身份信息 (OpenID Connect)</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- UUID Details -->
            <div id="uuid-details" class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-blue-100 p-4">
                    <h3 class="text-2xl font-bold text-blue-800 flex items-center">
                        <i class="fas fa-fingerprint mr-2"></i> UUID 生成与使用
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-bold text-lg mb-4 text-gray-800">生成 UUID (Java 示例)</h4>
                            <div class="code-block mb-6">
                                <pre class="p-4 overflow-x-auto"><code class="language-java">import java.util.UUID;

// 生成随机 UUID
String token = UUID.randomUUID().toString();

// 输出示例: 
// "f47ac10b-58cc-4372-a567-0e02b2c3d479"</code></pre>
                            </div>
                            
                            <h4 class="font-bold text-lg mb-2 text-gray-800">UUID 版本</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-v1 text-blue-500 mt-1 mr-2"></i>
                                    <span><strong>v1:</strong> 基于时间戳和MAC地址</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-v3 text-blue-500 mt-1 mr-2"></i>
                                    <span><strong>v3:</strong> 基于命名空间和名称的MD5哈希</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-v4 text-blue-500 mt-1 mr-2"></i>
                                    <span><strong>v4:</strong> 基于随机数</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-v5 text-blue-500 mt-1 mr-2"></i>
                                    <span><strong>v5:</strong> 基于命名空间和名称的SHA-1哈希</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-bold text-lg mb-4 text-gray-800">使用场景</h4>
                            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                                <ul class="space-y-3 text-gray-700">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span><strong>一次性令牌：</strong> 密码重置、邮箱验证等短期使用的令牌</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span><strong>简单认证：</strong> 内部系统或低安全性要求的API认证</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span><strong>唯一标识：</strong> 需要全局唯一标识符的场景</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span><strong>会话ID：</strong> 简单的会话标识符</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="mt-6">
                                <h4 class="font-bold text-lg mb-4 text-gray-800">过期机制</h4>
                                <p class="text-gray-700 mb-4">UUID 本身没有内建的过期机制。需要在应用程序中实现额外的逻辑：</p>
                                <div class="code-block">
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">// 示例：存储令牌并记录创建时间
String token = UUID.randomUUID().toString();
long createdAt = System.currentTimeMillis();
long expiresAfter = 3600000; // 1小时

// 验证时检查是否过期
if (System.currentTimeMillis() - createdAt < expiresAfter) {
    // 令牌有效
} else {
    // 令牌已过期
}</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Token Expiration -->
        <section id="expiration" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-clock mr-3 text-indigo-500"></i> Token 的过期时间设置
            </h2>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-4 text-white">
                    <h3 class="text-2xl font-bold flex items-center">
                        <i class="fas fa-shield-alt mr-2"></i> 安全性与过期机制
                    </h3>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 mb-6">
                        Token 通常有一个过期时间，以确保安全性。过期时间的设置方法取决于具体的 Token 类型和使用场景。合理的过期策略可以平衡安全性和用户体验。
                    </p>
                    
                    <div class="grid md:grid-cols-3 gap-6 mb-8">
                        <!-- JWT Expiration -->
                        <div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
                            <h4 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
                                <i class="fas fa-file-code mr-2"></i> JWT 过期
                            </h4>
                            <p class="text-gray-700 mb-4">在 JWT 的 Payload 部分，可以设置 <code class="bg-indigo-100 px-1 rounded">exp</code> 字段来指定 Token 的过期时间：</p>
                            <div class="code-block mb-4">
                                <pre class="p-4 overflow-x-auto"><code class="language-json">{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022,
  "exp": 1516242722
}</code></pre>
                            </div>
                            <p class="text-gray-700">过期时间通常设置为未来某个时间点的时间戳(秒)。</p>
                        </div>
                        
                        <!-- OAuth Expiration -->
                        <div class="bg-purple-50 p-6 rounded-lg border-l-4 border-purple-500">
                            <h4 class="font-bold text-lg mb-3 text-purple-700 flex items-center">
                                <i class="fas fa-lock mr-2"></i> OAuth 2.0 过期
                            </h4>
                            <p class="text-gray-700 mb-4">OAuth 2.0 规范允许在授权服务器上配置 Access Token 的有效期：</p>
                            <div class="code-block mb-4">
                                <pre class="p-4 overflow-x-auto"><code class="language-json">{
  "access_token": "eyJhbGciOi...",
  "token_type": "bearer",
  "expires_in": 3600,
  "refresh_token": "def50200..."
}</code></pre>
                            </div>
                            <p class="text-gray-700"><code class="bg-purple-100 px-1 rounded">expires_in</code> 表示令牌还有多少秒过期。</p>
                        </div>
                        
                        <!-- UUID Expiration -->
                        <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500">
                            <h4 class="font-bold text-lg mb-3 text-blue-700 flex items-center">
                                <i class="fas fa-fingerprint mr-2"></i> UUID 过期
                            </h4>
                            <p class="text-gray-700 mb-4">UUID 本身没有内建的过期机制。需要在应用程序中实现：</p>
                            <div class="code-block mb-4">
                                <pre class="p-4 overflow-x-auto"><code class="language-java">// 存储令牌创建时间
String token = UUID.randomUUID().toString();
long createdAt = System.currentTimeMillis();

// 验证时检查是否过期
if (System.currentTimeMillis() - createdAt < 3600000) {
    // 1小时内有效
}</code></pre>
                            </div>
                            <p class="text-gray-700">通常需要结合数据库或缓存记录令牌创建时间。</p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> 过期时间最佳实践
                        </h4>
                        <ul class="space-y-3 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span><strong>短期访问令牌：</strong> 通常设置为15分钟到24小时，具体取决于应用的安全要求</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span><strong>长期刷新令牌：</strong> 可以设置为数天到数月，用于获取新的访问令牌</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span><strong>敏感操作：</strong> 银行交易等高敏感操作应使用更短的过期时间(如5分钟)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span><strong>考虑用户体验：</strong> 过于频繁的重新认证会降低用户体验，需在安全和便利间平衡</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span><strong>令牌撤销：</strong> 即使令牌未过期，也应支持管理员或用户主动撤销令牌</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section id="visualization" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 flex items-center">
                <i class="fas fa-project-diagram mr-3 text-indigo-500"></i> Token 机制可视化
            </h2>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-8">
                <h3 class="text-2xl font-bold mb-6 text-gray-800">JWT 结构解析</h3>
                <div class="mermaid mb-8">
                    graph LR
                    A[JWT] --> B[Header]
                    A --> C[Payload]
                    A --> D[Signature]
                    B --> E["alg: 算法 (如HS256)"]
                    B --> F["typ: 类型 (JWT)"]
                    C --> G["sub: 用户ID"]
                    C --> H["name: 用户名"]
                    C --> I["iat: 签发时间"]
                    C --> J["exp: 过期时间"]
                    D --> K["Base64Url(Header) + . + Base64Url(Payload) + 密钥"]
                </div>
                
                <h3 class="text-2xl font-bold mb-6 text-gray-800">OAuth 2.0 授权码流程</h3>
                <div class="mermaid">
                    sequenceDiagram
                    participant C as 客户端
                    participant U as 用户
                    participant AS as 授权服务器
                    participant RS as 资源服务器
                    
                    U->>C: 访问客户端
                    C->>U: 重定向到授权服务器
                    U->>AS: 登录并授权
                    AS->>U: 重定向回客户端(带授权码)
                    U->>C: 传递授权码
                    C->>AS: 用授权码请求令牌
                    AS->>C: 返回访问令牌和刷新令牌
                    C->>RS: 使用访问令牌请求资源
                    RS->>C: 返回受保护资源
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto px-6 text-center">
            <div class="mb-4">
                <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                <p class="text-gray-400">探索技术的奥秘，分享知识的乐趣</p>
            </div>
            <div class="flex justify-center space-x-4 mb-6">
                <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition duration-300">
                    <i class="fas fa-globe"></i>
                </a>
            </div>
            <p class="text-sm text-gray-500">
                © 2023 技术小馆. 保留所有权利.
            </p>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            sequenceDiagram: {
                useMaxWidth: true,
                height: 50,
                width: 300
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>